<template>
    <view
        :animation="animationData"
        @tap="__e"
        :class="['vue-ref', customClass]"
        :data-event-opts="[['tap', [['onClick', ['$event']]]]]"
        data-ref="ani"
        :style="transformStyles"
        v-if="isShow"
    >
        <slot></slot>
    </view>
</template>

<script>
import tabBar from '@/components/TabBar/tabBar';
(global.webpackJsonp = global.webpackJsonp || []).push([
    ['uni_modules/uni-transition/components/uni-transition/uni-transition'],
    {
        '2ae5': function (t, n, i) {
            'use strict';

            i.r(n);
            var o = i('d7d8');
            var e = i.n(o);
            for (var a in o) {
                if (['default'].indexOf(a) < 0) {
                    (function (t) {
                        i.d(n, t, function () {
                            return o[t];
                        });
                    })(a);
                }
            }
            n.default = e.a;
        },
        '5e50': function (t, n, i) {
            'use strict';

            i.r(n);
            var o = i('c7f1');
            var e = i('2ae5');
            for (var a in e) {
                if (['default'].indexOf(a) < 0) {
                    (function (t) {
                        i.d(n, t, function () {
                            return e[t];
                        });
                    })(a);
                }
            }
            var r = i('f0c5');
            var s = Object(r.a)(e.default, o.b, o.c, false, null, null, null, false, o.a, void 0);
            n.default = s.exports;
        },
        c7f1: function (t, n, i) {
            'use strict';

            i.d(n, 'b', function () {
                return o;
            });
            i.d(n, 'c', function () {
                return e;
            });
            i.d(n, 'a', function () {});
            var o = function () {
                this.$createElement;
                this._self._c;
            };
            var e = [];
        },
        d7d8: function (t, n, i) {
            'use strict';

            var o = i('4ea4');
            Object.defineProperty(n, '__esModule', {
                value: true
            });
            n.default = void 0;
            var e = o(i('448a'));
            var a = o(i('7037'));
            var r = o(i('9523'));
            var s = i('b4c8');
            function c(t, n) {
                var i = Object.keys(t);
                if (Object.getOwnPropertySymbols) {
                    var o = Object.getOwnPropertySymbols(t);
                    if (n) {
                        o = o.filter(function (n) {
                            return Object.getOwnPropertyDescriptor(t, n).enumerable;
                        });
                    }
                    i.push.apply(i, o);
                }
                return i;
            }
            function u(t) {
                for (var n = 1; n < arguments.length; n++) {
                    if (null != arguments[n]) {
                        var i = arguments[n];
                    } else {
                        var i = {};
                    }
                    if (n % 2) {
                        c(Object(i), true).forEach(function (n) {
                            (0, r.default)(t, n, i[n]);
                        });
                    } else {
                        Object.getOwnPropertyDescriptors
                            ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(i))
                            : c(Object(i)).forEach(function (n) {
                                  Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(i, n));
                              });
                    }
                }
                return t;
            }
            var l = {
                name: 'uniTransition',
                emits: ['click', 'change'],
                props: {
                    show: {
                        type: Boolean,
                        default: false
                    },
                    modeClass: {
                        type: [Array, String],
                        default: function () {
                            return 'fade';
                        }
                    },
                    duration: {
                        type: Number,
                        default: 300
                    },
                    styles: {
                        type: Object,
                        default: function () {
                            return {};
                        }
                    },
                    customClass: {
                        type: String,
                        default: ''
                    }
                },
                data: function () {
                    return {
                        isShow: false,
                        transform: '',
                        opacity: 1,
                        animationData: {},
                        durationTime: 300,
                        config: {}
                    };
                },
                watch: {
                    show: {
                        handler: function (t) {
                            t ? this.open() : this.isShow && this.close();
                        },
                        immediate: true
                    }
                },
                computed: {
                    stylesObject: function () {
                        var t = u(
                            u({}, this.styles),
                            {},
                            {
                                'transition-duration': this.duration / 1000 + 's'
                            }
                        );
                        var n = '';
                        for (var i in t) {
                            n += this.toLine(i) + ':' + t[i] + ';';
                        }
                        return n;
                    },
                    transformStyles: function () {
                        return 'transform:' + this.transform + ';opacity:' + this.opacity + ';' + this.stylesObject;
                    }
                },
                created: function () {
                    this.config = {
                        duration: this.duration,
                        timingFunction: 'ease',
                        transformOrigin: '50% 50%',
                        delay: 0
                    };
                    this.durationTime = this.duration;
                },
                methods: {
                    init: function () {
                        if (arguments.length > 0 && void 0 !== arguments[0]) {
                            var t = arguments[0];
                        } else {
                            var t = {};
                        }
                        if (t.duration) {
                            this.durationTime = t.duration;
                        }
                        this.animation = (0, s.createAnimation)(Object.assign(this.config, t));
                    },
                    onClick: function () {
                        this.$emit('click', {
                            detail: this.isShow
                        });
                    },
                    step: function (t) {
                        var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
                        if (this.animation) {
                            for (var i in t) {
                                try {
                                    var o;
                                    'object' === (0, a.default)(t[i]) ? (o = this.animation)[i].apply(o, (0, e.default)(t[i])) : this.animation[i](t[i]);
                                } catch (t) {
                                    console.log('CatchClause', t);
                                    console.log('CatchClause', t);
                                    console.error('方法 '.concat(i, ' 不存在'));
                                }
                            }
                            this.animation.step(n);
                            return this;
                        }
                    },
                    run: function (t) {
                        if (this.animation) {
                            this.animation.run(t);
                        }
                    },
                    open: function () {
                        var that = this;
                        clearTimeout(this.timer);
                        this.transform = '';
                        this.isShow = true;
                        var n = this.styleInit(false);
                        var i = n.opacity;
                        var o = n.transform;
                        if (void 0 !== i) {
                            this.opacity = i;
                        }
                        this.transform = o;
                        this.$nextTick(function () {
                            that.timer = setTimeout(function () {
                                that.animation = (0, s.createAnimation)(that.config, that);
                                that.tranfromInit(false).step();
                                that.animation.run();
                                that.$emit('change', {
                                    detail: that.isShow
                                });
                            }, 20);
                        });
                    },
                    close: function (t) {
                        var that = this;
                        if (this.animation) {
                            this.tranfromInit(true)
                                .step()
                                .run(function () {
                                    that.isShow = false;
                                    that.animationData = null;
                                    that.animation = null;
                                    var t = that.styleInit(false);
                                    var i = t.opacity;
                                    var o = t.transform;
                                    that.opacity = i || 1;
                                    that.transform = o;
                                    that.$emit('change', {
                                        detail: that.isShow
                                    });
                                });
                        }
                    },
                    styleInit: function (t) {
                        var that = this;
                        var i = {
                            transform: ''
                        };
                        var o = function (t, o) {
                            'fade' === o ? (i.opacity = that.animationType(t)[o]) : (i.transform += that.animationType(t)[o] + ' ');
                        };
                        'string' == typeof this.modeClass
                            ? o(t, this.modeClass)
                            : this.modeClass.forEach(function (n) {
                                  o(t, n);
                              });
                        return i;
                    },
                    tranfromInit: function (t) {
                        var that = this;
                        var i = function (t, i) {
                            var o = null;
                            'fade' === i
                                ? (o = t ? 0 : 1)
                                : ((o = t ? '-100%' : 0),
                                  'zoom-in' === i && (o = t ? 0.8 : 1),
                                  'zoom-out' === i && (o = t ? 1.2 : 1),
                                  'slide-right' === i && (o = t ? '100%' : 0),
                                  'slide-bottom' === i && (o = t ? '100%' : 0));
                            that.animation[that.animationMode()[i]](o);
                        };
                        'string' == typeof this.modeClass
                            ? i(t, this.modeClass)
                            : this.modeClass.forEach(function (n) {
                                  i(t, n);
                              });
                        return this.animation;
                    },
                    animationType: function (t) {
                        return {
                            fade: t ? 1 : 0,
                            'slide-top': 'translateY('.concat(t ? 0 : '-100%', ')'),
                            'slide-right': 'translateX('.concat(t ? 0 : '100%', ')'),
                            'slide-bottom': 'translateY('.concat(t ? 0 : '100%', ')'),
                            'slide-left': 'translateX('.concat(t ? 0 : '-100%', ')'),
                            'zoom-in': 'scaleX('.concat(t ? 1 : 0.8, ') scaleY(').concat(t ? 1 : 0.8, ')'),
                            'zoom-out': 'scaleX('.concat(t ? 1 : 1.2, ') scaleY(').concat(t ? 1 : 1.2, ')')
                        };
                    },
                    animationMode: function () {
                        return {
                            fade: 'opacity',
                            'slide-top': 'translateY',
                            'slide-right': 'translateX',
                            'slide-bottom': 'translateY',
                            'slide-left': 'translateX',
                            'zoom-in': 'scale',
                            'zoom-out': 'scale'
                        };
                    },
                    toLine: function (t) {
                        return t.replace(/([A-Z])/g, '-$1').toLowerCase();
                    }
                }
            };
            n.default = l;
        }
    }
]);
(global.webpackJsonp = global.webpackJsonp || []).push([
    'uni_modules/uni-transition/components/uni-transition/uni-transition-create-component',
    {
        'uni_modules/uni-transition/components/uni-transition/uni-transition-create-component': function (t, n, i) {
            i('543d').createComponent(i('5e50'));
        }
    },
    [['uni_modules/uni-transition/components/uni-transition/uni-transition-create-component']]
]);
</script>
<style>
@import './uni-transition.css';
</style>
